<template>
  <div>
    <div class="search">
      <van-search
        shape="round"
        background="white"
        placeholder="搜索我的尖叫好物"
      />
    </div>
    <div class="category">
      <div class="furniture">
        <img src="@/utils/img/furniture.png" alt="">
      </div>
      <ul class="tool">
        <li :key="item.gearId" v-for="item in gear" @click="handleInner(item.gearId,item.title)">
          {{ item.title }}
          <i class="iconfont icon-youjiantou"></i>
        </li>
      </ul>
      <div class="household">
        <img src="@/utils/img/household.png" alt="">
      </div>
      <ul class="living">
        <li :key="item.houseId" v-for="item in household" @click="handleInner(item.houseId,item.title)">
          {{ item.title}}
          <i class="iconfont icon-youjiantou"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Vue from 'vue'
import { Search } from 'vant'

Vue.use(Search)
export default {
  computed: {
    ...mapState('category', ['gear', 'household'])
  },
  methods: {
    handleInner (gearId, title) {
      this.$router.push({ path: '/category/inner', query: { categoryId: gearId, title } })
    }
  }
}
</script>

<style lang="scss" scoped>
img{
  width: 100%;
}
.search{
  width: 80%;
}
.category{
  padding: 0px 15px;
  margin-top: 12px;
  margin-bottom:100px;
}
.tool,.living{
  margin-bottom: 10px;
  li{
    border-bottom: 1px solid #f0f0f0;
    padding: 18px 3px 18px 15px;
    display: flex;
    justify-content: space-between;
    .iconfont{
      font-size: 22px;
      color: gray;
    }
  }
}
</style>
